<!DOCTYPE html>
<html>
<head>
	<title>水平垂直居中</title>
	<style type="text/css">
		html, 
		body {
			width: 100%;
			height: 100%;
		}


		/*绝对定位*/
		.app1 {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 50%;
			height: 50%;
			background: red;
		}

		
		/*flex布局*/
		#body {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		.app2 {
			width: 50%;
			height: 50%;
			background: red;
		}


		/*table布局
			1. 存在问题
				- 父元素需要设置具体的宽度和高度
		*/
		.body {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			width: 100%;
			height: 100%;
			border: 1px solid red;
		}
		.app3 {
			display: inline-block;
			width: 50px;
			height: 50px;
			background: red;
		}


		/*grid布局*/
		.body{
			display: grid;
		}
		.app4 {
			justify-self: center;
			align-self: center;
			width: 50%;
			height: 50%;
			background: red;
		}
	</style>
</head>
<body>
<div class="app">
</div>
</body>
</html>